<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="属性配置" name="field" />
    </el-tabs>
    <div>
      <el-select v-model="selectKey" @change="handleKeyChange">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <div class="field-box">
      <el-scrollbar class="right-scrollbar">
        <el-form size="small" label-width="100px">
          <component :getFormId="getFormId" :props="activeItem" :is="comp.value"></component>
        </el-form>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import reg from './custom/register';
import { defineAsyncComponent, ref, shallowRef, computed, watch } from 'vue';

export default {
  name: 'configPanel',
  setup(props) {
    const currentTab = ref('field');
    const formIdArray = ref([]);
    const components = new Map();

    const registComp = () => {
      reg.forEach((c) => {
        const componentName = c.name;
        components.set(
          componentName,
          defineAsyncComponent(() => import(`./custom/configs/${componentName}.vue`))
        );
      });
    };
    registComp();
    const comp = computed(() => {
      let c = null;
      if (props.activeItem) {
        c = components.get(props.activeItem.compType);
      }
      return shallowRef(c);
    });
    const options = [
      {value:'1',label:'已选人员'},
      {value:'2',label:'查询结果'},
    ]
    const selectKey = ref('已选人员')
    watch(()=>props.activeItem,(newVal)=>{
      if(newVal){
        selectKey.value = newVal.dictionaryKey
      }
    },{deep:true})
    return {
      currentTab,
      formIdArray,
      comp,
      selectKey,
      options
    };
  },
  props: {
    activeItem: {
      type: Object,
      default: function () {
        return {};
      }
    },
    itemList: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },
  methods: {
    handleKeyChange(newVal){
      const originalValue = this.activeItem.dictionaryKey;
      // 检查值是否已被使用
      const isUsed = this.itemList.some(item => 
        item.id != this.activeItem.id && 
        item.dictionaryKey == newVal
      );
      console.log('isUsed',isUsed);
      
      if (isUsed) {
        this.selectKey = originalValue
        this.$message.error('该值已被其他组件使用');
        return;
      }

      const updateItem = {
        ...this.activeItem,
         dictionaryKey:newVal
      }
      console.log(this.itemList);
      const index = this.itemList.findIndex(item => item.id == this.activeItem.id)
      if(index != -1){
        this.$emit('update-list',{
          index,
          item:updateItem
        })
      }
      this.$emit('update:activeItem',updateItem)
    },
    getFormId(itemId) {
      this.formIdArray = [];
      Array.from(this.itemList, (item) => {
        if (item.compType === 'row') {
          Array.from(item.columns, (column) => {
            Array.from(column.list, (col) => {
              if (col._id !== itemId) {
                this.formIdArray.push(col.id);
              }
            });
          });
        } else {
          if (item._id !== itemId) {
            this.formIdArray.push(item.id);
          }
        }
      });
      return this.formIdArray;
    }
  }
};
</script>
<style scoped>
.field-box :deep(.el-scrollbar__wrap) {
  margin-left: 0px;
}
</style>
